<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible"/>
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport"/>
    <title></title>
    <link href="../../css/lanai-ui.css" rel="stylesheet"/>
</head>
<body>
<section class="content no-padding">
    <div class="box box-widget no-shadow">
        <div class="box-body">
            <h3>选项卡风格-1</h3>
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs">
                    <li class=""><a aria-expanded="false" data-toggle="tab" href="#tab_1">北京市</a></li>
                    <li class=""><a aria-expanded="false" data-toggle="tab" href="#tab_2">上海市</a></li>
                    <li class="active"><a aria-expanded="true" data-toggle="tab" href="#tab_3">天津市</a></li>
                    <li class="dropdown">
                        <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">
                            其他城市 <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">青岛市</a></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">广州市</a></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">海口市</a></li>
                            <li class="divider" role="presentation"></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">连云港市</a></li>
                        </ul>
                    </li>
                    <li class="pull-right"><a class="text-muted" href="#"><i class="fa fa-gear"></i></a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab_1">
                        北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市，
                        三千多年的历史孕育了故宫、天坛、八达岭长城、颐和园等众多名胜古迹。
                        早在七十万年前，北京周口店地区就出现了原始人群部落“北京人”。公元前1045年，
                        北京成为蓟、燕等诸侯国的都城。公元938年以来，北京先后成为辽陪都、金中都、元大都、明、清国都。1949年10月1日成为中华人民共和国首都。
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="tab_2">
                        上海，简称“沪”或“申”，是中国共产党的诞生地，中华人民共和国直辖市，
                        国家中心城市，超大城市，沪杭甬大湾区核心城市，国际经济、金融、贸易、航运、科技创新中心
                        ，首批沿海开放城市。上海地处长江入海口，是长江经济带的龙头城市，隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane active" id="tab_3">
                        天津，简称津，中华人民共和国直辖市、国家中心城市、超大城市、环渤海地区经济中心、首批沿海开放城市，全国先进制造研发基地、北方国际航运核心区、
                        金融创新运营示范区、改革开放先行区
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
            <h3>选项卡风格-2</h3>
            <p>ul使用样式<code>.pull-right</code></p>
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <li class=""><a aria-expanded="false" data-toggle="tab" href="#tab_1-1">北京市</a></li>
                    <li class=""><a aria-expanded="false" data-toggle="tab" href="#tab_2-2">上海市</a></li>
                    <li class="active"><a aria-expanded="true" data-toggle="tab" href="#tab_3-2">天津市</a></li>
                    <li class="dropdown">
                        <a aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown" href="#">
                            其他城市 <span class="caret"></span>
                        </a>
                        <ul class="dropdown-menu">
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">青岛市</a></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">广州市</a></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">海口市</a></li>
                            <li class="divider" role="presentation"></li>
                            <li role="presentation"><a href="#" role="menuitem" tabindex="-1">连云港市</a></li>
                        </ul>
                    </li>
                    <li class="pull-left header"><i class="fa fa-th"></i>城市介绍</li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab_1-1">
                        北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市，
                        三千多年的历史孕育了故宫、天坛、八达岭长城、颐和园等众多名胜古迹。
                        早在七十万年前，北京周口店地区就出现了原始人群部落“北京人”。公元前1045年，
                        北京成为蓟、燕等诸侯国的都城。公元938年以来，北京先后成为辽陪都、金中都、元大都、明、清国都。1949年10月1日成为中华人民共和国首都。
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane" id="tab_2-2">
                        上海，简称“沪”或“申”，是中国共产党的诞生地，中华人民共和国直辖市，
                        国家中心城市，超大城市，沪杭甬大湾区核心城市，国际经济、金融、贸易、航运、科技创新中心
                        ，首批沿海开放城市。上海地处长江入海口，是长江经济带的龙头城市，隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane active" id="tab_3-2">
                        天津，简称津，中华人民共和国直辖市、国家中心城市、超大城市、环渤海地区经济中心、首批沿海开放城市，全国先进制造研发基地、北方国际航运核心区、
                        金融创新运营示范区、改革开放先行区
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
            <h3>选项卡风格-3</h3>
            <p>ul使用样式<code>.line-tabs .tabs-danger</code></p>
            <div class="nav-tabs-custom margin-t-15 no-shadow">
                <ul class="nav nav-tabs line-tabs tabs-danger">
                    <li class=""><a aria-expanded="true" data-toggle="tab" href="#tab_11">北京市</a></li>
                    <li class="active"><a aria-expanded="true" data-toggle="tab" href="#tab_31">上海市</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane" id="tab_11">
                        北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市，
                        三千多年的历史孕育了故宫、天坛、八达岭长城、颐和园等众多名胜古迹。
                        早在七十万年前，北京周口店地区就出现了原始人群部落“北京人”。公元前1045年，
                        北京成为蓟、燕等诸侯国的都城。公元938年以来，北京先后成为辽陪都、金中都、元大都、明、清国都。1949年10月1日成为中华人民共和国首都。
                    </div>
                    <!-- /.tab-pane -->
                    <div class="tab-pane active" id="tab_31">
                        上海，简称“沪”或“申”，是中国共产党的诞生地，中华人民共和国直辖市，
                        国家中心城市，超大城市，沪杭甬大湾区核心城市，国际经济、金融、贸易、航运、科技创新中心
                        ，首批沿海开放城市。上海地处长江入海口，是长江经济带的龙头城市，隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接
                    </div>
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
            <h3>纵向选项卡</h3>
            <div class="nav-tabs-vertical">
                <ul class="nav nav-tabs">
                    <li class="active"><a data-toggle="tab" href="#a">北京市</a></li>
                    <li><a data-toggle="tab" href="#b">上海市</a></li>
                    <li><a data-toggle="tab" href="#c">天津市</a></li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="a">北京是首批国家历史文化名城和世界上拥有世界文化遗产数最多的城市，
                        三千多年的历史孕育了故宫、天坛、八达岭长城、颐和园等众多名胜古迹。
                        早在七十万年前，北京周口店地区就出现了原始人群部落“北京人”。公元前1045年，
                        北京成为蓟、燕等诸侯国的都城。公元938年以来，北京先后成为辽陪都、金中都、元大都、明、清国都。1949年10月1日成为中华人民共和国首都。
                    </div>
                    <div class="tab-pane" id="b">上海，简称“沪”或“申”，是中国共产党的诞生地，中华人民共和国直辖市，
                        国家中心城市，超大城市，沪杭甬大湾区核心城市，国际经济、金融、贸易、航运、科技创新中心
                        ，首批沿海开放城市。上海地处长江入海口，是长江经济带的龙头城市，隔东中国海与日本九州岛相望，南濒杭州湾，北、西与江苏、浙江两省相接
                    </div>
                    <div class="tab-pane" id="c">天津，简称津，中华人民共和国直辖市、国家中心城市、超大城市、环渤海地区经济中心、首批沿海开放城市，全国先进制造研发基地、北方国际航运核心区、
                        金融创新运营示范区、改革开放先行区
                    </div>
                </div>
            </div>
        </div>
</section>
<script src="../../js/jquery.min.js"></script>
<script src="../../js/lanai-ui.js"></script>
</body>
</html>
